<template>
  <div class="resources">
    <!-- top -->
    <TopView name="resource" title="资源库" msg="一份信心，一份努力，一份成功。十分信心，十分努力，十分成功"></TopView>

    <div class="resources-wrap">
      <!-- 标签 -->
      <div class="flags">
        <el-badge class="item" v-for="item in resources" :key="item.value" :value="item.resources.length">
          <div @click="goAnchor('#' + item.value)">
            <el-button type="primary" size="small">{{ item.label }}</el-button>
          </div>
        </el-badge>
      </div>

      <!-- 资源列表 -->
      <div class="list">
        <div v-for="item in resources" :key="item.value">
          <h2 :id="item.value" style="margin-bottom: 20px; padding: 10px; box-sizing: border-box; border-bottom: 2px solid #0fb783"><i class="fa fa-tags" style="margin-right: 5px"></i>{{ item.label }}</h2>
          <el-row :gutter="40" style="margin-bottom: 30px">
            <el-col v-for="sub_item in item.resources" :key="sub_item.id" :span="6" style="margin-bottom: 20px">
              <a :href="sub_item.path" target="_blank">
                <el-card :body-style="{ padding: '0px' }">
                  <div class="detail">
                    <el-image :src="sub_item.picUrl" lazy fit="cover" />
                    <div class="name">{{ sub_item.name }}</div>
                  </div>
                  <div class="description">{{ sub_item.description }}</div>
                </el-card>
              </a>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopView from '@/components/TopView.vue'
import resourcesApi from '@/api/resources.js'
import productTypeApi from '@/api/type'
export default {
  name: 'ResourcesView',
  components: {
    TopView
  },
  data() {
    return {
      resources: []
    }
  },
  created() {
    this.getTypeList()
  },
  methods: {
    // 锚点跳转
    goAnchor(selector) {
      // 参数selector是id选择器（#resource_admin)
      document.querySelector(selector).scrollIntoView({
        behavior: 'smooth', // 动画过渡效果-behavior: "auto" 或 "smooth" 默认为 "auto"
        block: 'center', // 垂直方向对齐-block: "start", "center", "end", 或 "nearest" 默认为 "start"
        inline: 'center' // 水平方向对齐-inline: "start", "center", "end", 或 "nearest" 默认为 "nearest"
      })
    },

    // 获取分类列表，筛选出资源菜单分类
    getTypeList() {
      productTypeApi.resourceTypelist().then(response => {
        if (response.code === 20000) {
          const data = response.data.data
          const types = []
          for (const i in data) {
            if (data[i].level === '2') {
              // 1是分类菜单，2是资源库菜单
              types.push({
                label: data[i].name, // 塞入中文名
                value: data[i].tab // 塞入key
              })
            }
          }
          // 获取对应资源分类的资源数据
          this.getResourcesList(types)
        } else {
          this.$message.error(response.message)
        }
      })
    },
    getResourcesList(types) {
      resourcesApi.list().then(res => {
        if (res.code === 20000) {
          // 所有资源
          const resourcesList = res.data.data
          for (const i in types) {
            types[i].resources = [] // 塞入资源数据
            for (const item of resourcesList) {
              // 将资源进行分类
              if (item.typeTab === types[i].value) {
                types[i].resources.push(item)
              }
            }
          }
          this.resources = types
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-badge__content {
  background-color: #0bbd87;
}

/deep/ .el-button--primary {
  background-color: #15bd8b;
  border-color: #15bd8b;
}

/deep/ .el-card {
  border: 1px solid #16b88d;
}

.resources {
  width: 100%;
  height: auto;

  .resources-wrap {
    width: 100%;
    height: auto;
    padding: 0 10%;
    box-sizing: border-box;
    opacity: 0.95;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -60px;
    left: 0;

    .flags {
      width: 80%;
      height: auto;
      margin: 0 auto 30px auto;
      padding: 30px;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid #eaeefb;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: row wrap;

      .item {
        margin: 10px 30px 10px 0;
      }
    }

    .list {
      width: 80%;
      height: auto;
      margin: 0 auto;
      padding: 20px 40px;
      box-sizing: border-box;
      border-radius: 5px;
      margin-bottom: 50px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

      .detail {
        width: 100%;
        height: auto;
        padding: 10px 0 0 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-flow: row nowrap;

        .el-image {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin: 10px;
          position: relative;
          vertical-align: middle;
          max-width: 100%;
          border: 1px solid #c6c6c6;
          box-shadow: 2px 2px 2px 2px #000;
        }
        .name {
          font-weight: bold;
          text-align: left;
        }
      }
      .description {
        height: 40px;
        overflow: hidden;
        text-align: left;
        color: #929292;
        margin: 0px 10px 10px 10px;
        font-size: 12px;
        line-height: 20px;
      }
    }
  }
}
</style>
